/**
 * @title 模板页面 舞台数据
 */
import Konva from "konva";

const templateStage = {
  namespaced: true,
  state: {
    proscenium: false, //舞台是否开启
    konvaname: "", //当前舞台名字 创建模板使用
    konvaid: null, //当前模板id 展示模板使用
    //创建画布-原始的画布大小
    imgW: null,
    imgH: null,
    //计算之后最适应的舞台大小
    configKonva: {
      width: null,
      height: null,
      fill: "#fff",
    },
    maxW: 0,
    maxH: 0,
    //舞台中包含的元素个数 555
    numberRefs: 0,
    // 背景图片
    // backImg: null,
    //图片数据
    listImg: [],
    //矩形数据
    listRect: [],
    //文本数据
    listNote: [],
    //出现图片框
    listEllipse: [],
    //LOGO数据
    listlogo: [],
    //上锁元素框
    keybox: [],
    //要出现文本框的元素
    textNode: "",
    //要出现拖拽框的元素
    selectedShapeName: "",
    //要取消出现拖拽框
    cancelName: "",
    //最合适的舞台大小百分比
    backSize: "",
    //获取当前选中元素的名字
    clickname: "",
    //添加文本的字体大小
    textfontsize: 40,
    //添加文本的字体风格
    textfontFamily: "Microsoft YaHei",
    //日期工具
    datatool: null,
    //logo工具
    logotool: null,
    //普通文本工具
    listNottetool: null,
    //图片工具
    imgtool: null,
    //图片框工具
    ellipsetool: null,
    //获取正在修改的元素
    modifyele: null,
    //被锁住的元素
    keyele: [],
    //更新元素
    updatele: 0,
    //用户修改比例
    editbackSize: "",
    //舞台的图片个数
    imgnum: 0,
    //历史记录
    historylist: [],
    //当前历史进程
    historycurrentpage: 0,
    originx: null,
    originy: null,
    endx: null,
    endy: null,
    onelevel:null,
    twolevel:null,
    threelevel:null,
    /**
     * 模板公式
     */
    rules: "",
    /**
     * 保存到剪切板禁用
     */
    savetoClipBoardBtn:true,
    /**
     * 输入的模板内容
     */
    templateAllText:""
  },
  mutations: {
    /**
     * 改变禁用按钮
     */
    switchsavetoClipBoardBtn(state,value){
      state.savetoClipBoardBtn = value;
    },
    /**
     * 设置模板公式
     * @param {*} state 
     * @param {*} value 
     */
     setRules(state,value){
      state.rules = value;
    },
    /**
     * 清除模板公式
     */
    clearRules(state){
      state.rules = []
    },
    /**
     * 保存文本框内容
     * @param {*} state 
     * @param {*} value 
     */
    savetemplateAllText(state,value){
      state.templateAllText = value;
    },
    /**
     * 清除文本框内容
     * @param {*} state 
     * @param {*} value 
     */
    cleartemplateAllText(state){
      state.templateAllText = "";
    },
    KONVATEXT(state, value){
      state.onelevel=value.onelevel
      state.twolevel=value.twolevel
      state.threelevel=value.threelevel
    },
    LOCATION(state, value) {
      state.originx = value.originx;
      state.originy = value.originy;
      state.endx = value.endx;
      state.endy = value.endy;
    },
    REPETHISTORY(state, value) {
      let num = state.historylist.length - value - 1;
      state.historylist.splice(num, value);
    },
    //前进
    HISTORYPROCESS(state, value) {
      state.historycurrentpage = state.historycurrentpage + value;
    },
    HISTORY(state) {
      state.historylist = [];
      state.historycurrentpage = 0;
    },
    HISTORYLIST(state, value) {
      state.historylist.splice(
        state.historycurrentpage,
        state.historylist.length - state.historycurrentpage,
        value
      );

      state.historycurrentpage = state.historycurrentpage + 1;
    },
    SORTHISTORYLIST(state) {
      let arr = [];
      state.historylist.forEach((v, i) => {
        if (i < state.historycurrentpage) arr.push(v);
      });
      // arr.push(value1);
      state.historylist = arr;
      state.historycurrentpage = state.historylist.length;
    },
    //添加时的历史记录
    //logo数据
    LISTLOGO(state, value) {
      state.listlogo.push(value);
    },
    //图片数据
    LISTIMG(state, value) {
      state.listImg.push(value);
    },
    PUSHLISTIMG(state, value) {
      state.listImg.push(value);
    },
    PUSHLISTLOGO(state, value) {
      state.listlogo.push(value);
    },
    PUSHLISTNOTE(state, value) {
      state.listNote.push(value);
    },
    PUSHLISTELLIPSE(state, value) {
      state.listEllipse.push(value);
    },
    //图片框数据
    LISTELLIPSE(state, value) {
      state.listEllipse.push(value);
    },

    //文本框数据
    LISTNOTE(state, value) {
      state.listNote.push(value);
    },
    /**
     * 设置文本框数据
     * @param {*} state 
     * @param {*} value 
     */
    SETLISTNOTE(state, value){
      state.listNote = value
    },
    UPDATELENULL(state, value) {
      state.updatele = value;
    },
    MAXH(state, value) {
      state.maxH = value;
    },
    MAXW(state, value) {
      state.maxW = value;
    },
    KONVANAME(state, value) {
      state.konvaname = value;
    },
    KONVAID(state, value) {
      state.konvaid = value;
    },
    CONFIGKONVANULL(state, value) {
      state.configKonva.width = value;
      state.configKonva.height = value;
    },
    PROSCENIUM(state, value) {
      state.proscenium = value;
    },
    //创建画布-原始的画布大小
    IMGW(state, value) {
      state.imgW = value;
    },
    IMGH(state, value) {
      state.imgH = value;
    },
    //舞台中的图片个数
    IMGNUM(state) {
      state.imgnum++;
    },
    //重置舞台中的图片个数
    REASETIMGNUM(state, value) {
      state.imgnum = value;
    },
    CON(state, value) {
      state.configKonva.width = value.width;
      state.configKonva.height = value.height;
    },
    CONKONVA(state, value) {
      state.configKonva.width = state.imgW;
      state.configKonva.height = state.imgH;
      // 最合适的舞台大小百分比
      state.backSize = value;
      state.editbackSize = value;
    },
    //计算之后最适应的舞台大小
    CONFIGKONVA(state, value) {
      state.configKonva.width = state.imgW;
      state.configKonva.height = state.imgH;
      // 最合适的舞台大小百分比
      state.backSize = value;
      state.editbackSize = value;
    },
    //用户修改的舞台比例
    CONFIGKONVAEDIT(state, value) {
      state.editbackSize = value;
      state.configKonva.width = state.imgW * value;
      state.configKonva.height = state.imgH * value;
      if (state.listImg) {
        state.listImg.forEach((v) => {
          v.config.width = v.config.w * value;
          v.config.height = v.config.h * value;
          v.config.x = (v.config.x / v.config.s) * value;
          v.config.y = (v.config.y / v.config.s) * value;
          v.config.s = value;
        });
      }
      if (state.listlogo) {
        state.listlogo.forEach((v) => {
          v.config.width = v.config.w * value;
          v.config.height = v.config.h * value;
          v.config.x = (v.config.x / v.config.s) * value;
          v.config.y = (v.config.y / v.config.s) * value;
          v.config.s = value;
        });
      }
      if (state.listNote) {
        state.listNote.forEach((v) => {
          v.config.width = v.config.width * value;
          v.config.height = v.config.height * value;
        });
      }
    },
    //重置舞台上锁
    REASETKEYELE(state, value) {
      state.keyele = value;
    },
    //重置舞台中包含的个数
    REASETNUMBERREFS(state, value) {
      state.numberRefs = value;
    },
    //舞台中包含的元素个数
    NUMBERREFS(state, value) {
      state.numberRefs = state.numberRefs + value;
    },
    //背景图片
    // BACKIMG(state, value) {
    //   state.backImg = value;
    // },

    //清空图片数据
    LISTIMGNULL(state, value) {
      state.listImg = value;
    },
    //清空logo数据
    LISTLOGONULL(state, value) {
      state.listlogo = value;
    },
    //清空文本框数据
    LISTNOTENULL(state, value) {
      state.listNote = value;
    },
    //图片框数据
    LISTELLIPSENULL(state, value) {
      state.listEllipse = value;
    },
    //复制素材
    COPYLISTING(state, value) {
      let arr = [];
      let obj;
      let imgsrc;
      state.listImg.forEach((v) => {
        if (v.config.name == value) {
          obj = JSON.parse(JSON.stringify(v));
          imgsrc = v.config.image.src;
          v.config.filters.forEach((v) => {
            arr.push(v.name);
          });
        }
      });
      obj.config.name = `imgpic${state.numberRefs + 1}`;
      obj.config.picname = `图片${state.imgnum + 1}`;
      obj.config.filters = [];
      obj.config.draggable = true;
      arr.forEach((v) => {
        if (v == "Brighten" || v == "s") {
          obj.config.filters.push(Konva.Filters.Brighten);
        } else if (v == "Grayscale" || v == "i") {
          obj.config.filters.push(Konva.Filters.Grayscale);
        }
      });
      let img = new Image();
      img.onload = function () {
        obj.config.image = img;
        //把对象push到数组
        state.listImg.push(obj);
        //图片数量++
        state.imgnum = state.imgnum + 1;
        state.numberRefs = state.numberRefs + 1;
        //元素数量++
      };
      img.crossOrigin = "Anonymous";
      img.src = imgsrc;
    },
    //复制logo
    COPYLISTLOGO(state, value) {
      let arr = [];
      let obj;
      let imgsrc;
      state.listlogo.forEach((v) => {
        if (v.config.name == value) {
          obj = JSON.parse(JSON.stringify(v));
          imgsrc = v.config.image.src;
          v.config.filters.forEach((v) => {
            arr.push(v.name);
          });
        }
      });

      obj.config.name = `imglogo${state.numberRefs + 1}`;
      obj.config.filters = [];
      obj.config.draggable = true;
      arr.forEach((v) => {
        if (v == "Brighten" || v == "s") {
          obj.config.filters.push(Konva.Filters.Brighten);
        } else if (v == "Grayscale" || v == "i") {
          obj.config.filters.push(Konva.Filters.Grayscale);
        }
      });
      let img = new Image();
      img.onload = function () {
        obj.config.image = img;
        //把对象push到数组
        state.listlogo.push(obj);
        //元素数量++
        state.numberRefs = state.numberRefs + 1;
      };
      img.crossOrigin = "Anonymous";
      img.src = imgsrc;
    },
    //复制文字
    COPYLISTNOTE(state, value) {
      let obj;
      state.listNote.forEach((v) => {
        if (v.config.name == value) {
          obj = JSON.parse(JSON.stringify(v));
        }
      });
      obj.config.name = `context${state.numberRefs + 1}`;
      obj.config.draggable = true;
      state.listNote.push(obj);
      state.numberRefs = state.numberRefs + 1;
    },
    //元素拖拽中或变换中
    ELEDRAGMOVETRANSFORM(state, value) {
      // console.log(value);
      if (value.attrs.name.indexOf("pic") != -1) {
        state.listImg.forEach((v) => {
          if (v.config.name == value.name()) {
            v.config.draggable = value.draggable();
            v.config.height = Number(value.height());
            v.config.width = Number(value.width());
            v.config.offsetX = Number(value.offsetX());
            v.config.offsetY = Number(value.offsetY());
            v.config.rotation = Number(value.rotation());
            v.config.opacity = Number(value.opacity());
            v.config.scaleX = Number(value.scaleX());
            v.config.scaleY = Number(value.scaleY());
            v.config.strokeEnabled = value.strokeEnabled();
            v.config.x = Number(value.x());
            v.config.y = Number(value.y());
          }
        });
      } else if (value.attrs.name.indexOf("logo") != -1) {
        state.listlogo.forEach((v) => {
          if (v.config.name == value.name()) {
            v.config.draggable = value.draggable();
            v.config.height = Number(value.height());
            v.config.width = Number(value.width());
            v.config.offsetX = Number(value.offsetX());
            v.config.offsetY = Number(value.offsetY());
            v.config.rotation = Number(value.rotation());
            v.config.opacity = Number(value.opacity());
            v.config.scaleX = Number(value.scaleX());
            v.config.scaleY = Number(value.scaleY());
            v.config.strokeEnabled = value.strokeEnabled();
            v.config.x = Number(value.x());
            v.config.y = Number(value.y());
          }
        });
      } else if (value.attrs.name.indexOf("con") != -1) {
        state.listNote.forEach((v) => {
          if (v.config.name == value.name()) {
            // console.log(value);
            v.config.align = value.align();
            v.config.draggable = value.draggable();
            v.config.ellipsis = value.ellipsis();
            v.config.fill = value.fill();
            v.config.fontFamily = value.fontFamily();
            v.config.fontStyle = value.fontStyle();
            v.config.height = Number(value.height())
              ? Number(value.height())
              : v.config.height();
            v.config.width = Number(value.width())
              ? Number(value.width())
              : v.config.width;
            v.config.offsetX = Number(value.offsetX());
            v.config.offsetY = Number(value.offsetY());
            v.config.rotation = Number(value.rotation());
            // console.log(value.rotation());
            v.config.opacity = Number(value.opacity());
            v.config.scaleX = Number(value.scaleX())
              ? Number(value.scaleX())
              : v.config.scaleX();

            v.config.scaleY = Number(value.scaleY())
              ? Number(value.scaleY())
              : v.config.scaleY();
            v.config.skewX = Number(value.skewX());
            v.config.skewY = Number(value.skewY());
            v.config.text = value.text();
            v.config.strokeEnabled = value.strokeEnabled();
            v.config.x = Number(value.x()) ? Number(value.x()) : v.config.x;
            // console.log(value.x());
            v.config.y = Number(value.y()) ? Number(value.y()) : v.config.y;
          }
        });
      } else if (value.attrs.name.indexOf("ellipse") != -1) {
        state.listEllipse.forEach((v) => {
          if (v.config.name == value.name()) {
            v.config.scaleX = Number(value.scaleX()) || Number(v.config.scaleX);
            v.config.scaleY = Number(value.scaleY()) || Number(v.config.scaleY);
            // v.config.strokeEnabled = value.strokeEnabled();
            v.config.x = Number(value.x()) || Number(v.config.x);
            v.config.y = Number(value.y()) || Number(v.config.y);
            // v.config.skewX = Number(value.skewX());
            // v.config.skewY = Number(value.skewY());
            v.config.width = 120 * v.config.scaleX;
            v.config.height = 180 * v.config.scaleY;
          }
        });
      }
    },
    //修改图片框的宽
    ALTERELLIPSEW(state, value) {
      state.listEllipse.forEach((v) => {
        if (v.config.name == state.modifyele) v.config.width = value / 2;
      });
    },
    //修改图片框的高
    ALTERELLIPSEH(state, value) {
      state.listEllipse.forEach((v) => {
        if (v.config.name == state.modifyele) v.config.height = value / 2;
      });
    },
    //要出现文本框的元素
    TEXTNODE(state, value) {
      state.textNode = value;
    },
    //当前选中的名字
    SELECTEDSHAPENAME(state, value) {
      state.selectedShapeName = value;
    },
    //取消选中的名字
    CANCELNAME(state, value) {
      state.cancelName = value;
    },
    //鼠标进入元素，获取元素名
    CLICKNAMEREACT(state, value) {
      state.clickname = value;
    },
    //鼠标离开元素，清空
    CLEARNAMEREACT(state) {
      state.clickname = [];
    },
    //清空矩形数据
    CLEARREATLIST(state, value) {
      state.listRect = value;
    },
    //添加矩形数据
    PUSHLISTRECT(state, value) {
      state.listRect.push(value);
    },
    //添加上锁框
    KEYBOXADD(state, value) {
      state.keybox.push(value);
    },
    KEYBOXNULL(state, value) {
      state.keybox = value;
    },
    //日期工具
    DATATOOL(state, value) {
      state.datatool = value;
    },
    //logo工具
    LOGOTOOL(state, value) {
      state.logotool = value;
    },
    //普通文本工具
    LISTNOTETOOL(state, value) {
      state.listNottetool = value;
    },
    //图片工具
    IMGTOOL(state, value) {
      state.imgtool = value;
    },
    //图片框工具
    ELLIPSETOOL(state, value) {
      state.ellipsetool = value;
    },
    //获取正在修改的元素
    MODIFYELE(state, value) {
      state.modifyele = value;
    },
    //内容页 - logo列表 - 替换图片
    CHEANGELOGO(state, value) {
      state.listlogo.forEach((v) => {
        if (v.config.name == state.selectedShapeName) {
          let img = new Image();
          img.onload = function () {
            v.config.width = img.width;
            v.config.height = img.height;
            v.config.w = img.width;
            v.config.h = img.height;
            v.config.image = img;
            v.config.picname = value.name;
          };
          img.crossOrigin = "Anonymous";
          img.src = value.src;
        }
      });
    },
    //内容页 - pic列表 - 替换图片
    CHEANGEPIC(state, value) {
      state.listImg.forEach((v) => {
        if (v.config.name == state.selectedShapeName) {
          let img = new Image();
          img.onload = function () {
            v.config.width = img.width;
            v.config.height = img.height;
            v.config.w = img.width;
            v.config.h = img.height;
            v.config.image = img;
            v.config.picname = value.name;
          };
          img.crossOrigin = "Anonymous";
          img.src = value.src;
        }
      });
    },
    //图片工具-替换图片
    REPLACEIMG(state, value) {
      state.listImg.forEach((v) => {
        if (v.config.name == state.modifyele) {
          //替换图片
          const reader = new FileReader();
          reader.onload = (res) => {
            let img = new Image();
            img.onload = function () {
              v.config.width = img.width;
              v.config.height = img.height;
              v.config.w = img.width;
              v.config.h = img.height;
              v.config.image = img;
              v.config.picname = "本地图片";
              state.updatele++;
            };
            img.crossOrigin = "Anonymous";
            img.src = res.target.result;
          };
          reader.readAsDataURL(value);
          //消出灰度
          v.config.filters = []; //都删除然后再添加
          v.config.filters.push(Konva.Filters.Brighten);
        }
      });
    },
    //图片工具--切图功能
    CUTIMG(state, value) {
      state.listImg.forEach((v) => {
        if (v.config.name == state.modifyele) {
          let img = new Image();
          img.onload = function () {
            v.config.width = img.width;
            v.config.height = img.height;
            v.config.w = img.width;
            v.config.h = img.height;
            v.config.image = img;
          };
          img.crossOrigin = "Anonymous";
          img.src = value;
        }
      });
    },
    //图片工具-抠图
    MATIMG(state, value) {
      state.listImg.forEach((v) => {
        if (v.config.name == state.modifyele) {
          let img = new Image();
          img.onload = function () {
            // v.config.width = JSON.parse(JSON.stringify(img.width));
            // v.config.height = JSON.parse(JSON.stringify(img.height));
            v.config.image = img;
            state.updatele++;
          };
          img.crossOrigin = "Anonymous";
          img.src = value;
        }
      });
    },
    //图片工具-灰度
    GRAYIMG(state) {
      state.listImg.forEach((v) => {
        if (v.config.name == state.modifyele) {
          let arr = v.config.filters;
          v.config.filters = []; //都删除然后再添加
          if (arr.length == 1 || arr.length == 0) {
            v.config.filters.push(Konva.Filters.Grayscale);
          }
          v.config.filters.push(Konva.Filters.Brighten);
        }
      });
    },
    //图片工具-层级关系
    ZINDEXIMIMG(state) {
      //获取背景的位置
      const item = state.listImg.find((v) => v.config.name == state.modifyele);
      const index = state.listImg.indexOf(item);
      if (item.config.z) {
        //末尾底部-置于底部
        item.config.z = false;
        state.listImg.splice(index, 1);
        state.listImg.unshift(item);
        return;
      } else {
        //末尾添加-置于顶部
        item.config.z = true;
        state.listImg.splice(index, 1);
        state.listImg.push(item);
        // let i = state.listImg.findIndex((v) => {
        //   let i = v.config.name.indexOf("back");
        //   return i;
        // });
        return;
      }
    },
    //图片工具-删除图片
    DELLISTIMG(state, value) {
      state.listImg.splice(value, 1);
      state.modifyele = null;
      state.imgtool = null;
    },
    //logo工具-删除图片
    LOGODELLISTIMG(state, value) {
      state.listlogo.splice(value, 1);
      state.modifyele = null;
      state.logotool = null;
    },
    //文本工具-删除图片
    TEXTDELLISTIMG(state, value) {
      state.listNote.splice(value, 1);
      state.modifyele = null;
      state.listNottetool = null;
      state.datatool = null;
    },
    //渲染素材列表排序
    SORTLISTIMG(state, value) {
      let index = value.config.name.substr(-1);
      state.listImg.splice(index, 0, value);
    },
    //picbox-删除图片框
    PICBOXDELLISTIMG(state, value) {
      state.listEllipse.splice(value, 1);
      state.modifyele = null;
      state.ellipsetool = null;
      state.datatool = null;
    },
    // //图片工具-删除图片
    // DELLISTLOGO(state, value) {
    //   state.listImg.splice(value, 1);
    //   state.modifyele = null;
    //   state.imgtool = null;
    // },
    // //图片工具-复制图片
    // COPYLISTIMG(state) {
    //   state.listImg.forEach((v) => {
    //     if (v.config.name == state.modifyele) {
    //       let obj = JSON.parse(JSON.stringify(v));
    //       state.numberRefs = state.numberRefs + 1;
    //       obj.config.name = `imgpic${state.numberRefs}`;
    //       obj.config.x =0;
    //       obj.config.y =0;
    //       state.listImg.push(obj);
    //     }
    //   });
    // },
    //模板中所有被锁住的元素
    LISTKEYELE(state, value) {
      state.keyele.push(value);
    },
    //图片工具-添加被锁住的元素
    ADDKEYELE(state, value) {
      state.keyele.push(value);
      state.clickname = "";
      state.selectedShapeName = value;
      state.listImg.forEach((v) => {
        if (v.config.name == state.modifyele) {
          v.config.draggable = false;
        }
      });
    },
    //logo工具-添加被锁的元素
    LOGOADDKEYELE(state, value) {
      state.keyele.push(value);
      state.clickname = "";
      state.selectedShapeName = value;
      state.listlogo.forEach((v) => {
        if (v.config.name == state.modifyele) {
          v.config.draggable = false;
        }
      });
    },

    //文本工具-添加被锁住的元素
    TEXTADDKEYELE(state, value) {
      state.keyele.push(value);
      state.clickname = "";
      state.listNote.forEach((v) => {
        if (v.config.name == state.modifyele) {
          v.config.draggable = false;
        }
      });
    },
    //图片工具-添加被锁住的元素
    PICBOXADDKEYELE(state, value) {
      state.keyele.push(value);
      state.clickname = "";
      state.listEllipse.forEach((v) => {
        if (v.config.name == state.modifyele) {
          v.config.draggable = false;
        }
      });
    },
    //图片工具-删除被锁住的元素
    DELKEYELE(state, value) {
      state.clickname = value;
      state.selectedShapeName = value;
      state.listImg.forEach((v) => {
        if (v.config.name == state.modifyele) {
          v.config.draggable = true;
        }
      });
      let index = state.keyele.findIndex((v) => v == value);
      state.keyele.splice(index, 1);
    },
    //logo工具-删除被锁住的元素
    LOGODELKEYELE(state, value) {
      state.clickname = value;
      state.selectedShapeName = value;
      state.listlogo.forEach((v) => {
        if (v.config.name == state.modifyele) {
          v.config.draggable = true;
        }
      });
      let index = state.keyele.findIndex((v) => v == value);
      state.keyele.splice(index, 1);
    },
    //文本工具-删除被锁住的元素
    TEXTDELKEYELE(state, value) {
      state.clickname = value;
      state.selectedShapeName = value;
      state.listNote.forEach((v) => {
        if (v.config.name == state.modifyele) {
          v.config.draggable = true;
          // v.config.strokeWidth = 0;
        }
      });
      let index = state.keyele.findIndex((v) => v == value);
      state.keyele.splice(index, 1);
    },
    //文本工具-删除被锁住的元素
    PICBOXDELKEYELE(state, value) {
      state.clickname = value;
      state.selectedShapeName = value;
      state.listEllipse.forEach((v) => {
        if (v.config.name == state.modifyele) {
          v.config.draggable = true;
          // v.config.strokeWidth = 0;
        }
      });
      let index = state.keyele.findIndex((v) => v == value);
      state.keyele.splice(index, 1);
    },
    //文本工具-文本加粗
    TEXTWEIGHT(state, value) {
      state.listNote.forEach((v) => {
        if (v.config.name == state.modifyele) {
          if (value) {
            //加粗
            if (!v.config.fontStyle.indexOf("italic") == -1) {
              v.config.fontStyle = "italic bold";
            } else {
              v.config.fontStyle = "bold";
            }
          } else {
            //不加粗
            if (!v.config.fontStyle.indexOf("italic") == -1) {
              v.config.fontStyle = "italic";
            } else {
              v.config.fontStyle = "normal ";
            }
          }
        }
      });
    },
    //文本工具-文本斜体
    TEXTITALIC(state, value) {
      state.listNote.forEach((v) => {
        if (v.config.name == state.modifyele) {
          if (value) {
            //加粗
            if (v.config.fontStyle.indexOf("bold") != -1) {
              v.config.fontStyle = "italic bold";
            } else {
              v.config.fontStyle = "italic";
            }
          } else {
            //不加粗
            if (v.config.fontStyle.indexOf("bold") != -1) {
              v.config.fontStyle = "bold";
            } else {
              v.config.fontStyle = "normal ";
            }
          }
        }
      });
    },
    //文本工具-下划线  underline
    TEXTUNDERLINE(state, value) {
      state.listNote.forEach((v) => {
        if (v.config.name == state.modifyele) {
          if (value) {
            //下划线
            if (v.config.textDecoration.indexOf("line-through") != -1) {
              v.config.textDecoration = "line-through underline ";
            } else {
              v.config.textDecoration = "underline";
            }
          } else {
            //不下划线
            if (v.config.textDecoration.indexOf("line-through") != -1) {
              v.config.textDecoration = "line-through";
            } else {
              v.config.textDecoration = "normal ";
            }
          }
        }
      });
    },
    //文本工具-删除线
    TEXTDELLINE(state, value) {
      state.listNote.forEach((v) => {
        if (v.config.name == state.modifyele) {
          if (value) {
            //下划线
            if (v.config.textDecoration.indexOf("underline") != -1) {
              v.config.textDecoration = "line-through underline ";
            } else {
              v.config.textDecoration = "line-through";
            }
          } else {
            //不下划线
            if (v.config.textDecoration.indexOf("underline") != -1) {
              v.config.textDecoration = "underline";
            } else {
              v.config.textDecoration = "normal ";
            }
          }
        }
      });
    },
    //文本工具-文本横向对齐方式
    TEXTALIGN(state, value) {
      state.listNote.forEach((v) => {
        if (v.config.name == state.modifyele) {
          if (value == 0) {
            //左
            v.config.align = "left";
          } else if (value == 1) {
            //行居中
            v.config.align = "center";
          } else if (value == 2) {
            //右
            v.config.align = "right";
          }
        }
      });
    },
    //文本工具-文本纵向向对齐方式
    TEXTVERTICAL(state, value) {
      state.listNote.forEach((v) => {
        if (v.config.name == state.modifyele) {
          //左
          if (value == 0) v.config.verticalAlign = "top";
          //行居中
          else if (value == 1) v.config.verticalAlign = "middle";
          //右
          else if (value == 2) v.config.verticalAlign = "bottom";
        }
      });
    },
    //文本工具-删除描边
    TEXTDELSTROKE(state) {
      state.listNote.forEach((v) => {
        if (v.config.name == state.modifyele) {
          v.config.strokeWidth = 0;
          v.config.stroke = "#000000";
        }
      });
    },
    //文本工具-删除阴影
    TEXTDELSHADOW(state) {
      state.listNote.forEach((v) => {
        if (v.config.name == state.modifyele) {
          v.config.shadowColor = "#000000";
          v.config.shadowOffsetX = 0;
          v.config.shadowOffsetY = 0;
          v.config.shadowBlur = 0;
        }
      });
    },
    TEXTVERTICALTEXT(state, value) {
      state.listNote.forEach((v) => {
        if (v.config.name == state.modifyele) {
          v.config.verticaltext = value;
        }
      });
    },
    DASHITOU(state, value) {
      // state.listNote.forEach((v) => {
      // console.log(v.config.name);
      // if (state.listNote[0].config.name == "context2") {
      state.listNote[0].config.originaltext = value.originaltext;
      state.listNote[0].config.text = value.text;
      state.listNote[0].config.lineNum = value.lineNum;
      state.listNote[0].config.spacingNum = value.spacingNum;
      state.listNote[0].config.width =
        state.listNote[0].config.fontSize * value.spacingNum +
        (value.spacingNum - 1) * state.listNote[0].config.letterSpacing;
      state.listNote[0].config.height =
        state.listNote[0].config.fontSize * value.lineNum +
        value.lineNum *
          (state.listNote[0].config.lineHeight - 1) *
          state.listNote[0].config.fontSize;
      // } else if (v.config.name == "context3") {
      state.listNote[1].config.originaltext = value.onetext;
      state.listNote[1].config.text = value.onetext;
      // }
      // });
    },
  },
  actions: {},
  getters: {
    getRules: (state) => state.rules,
  },
};
export default templateStage;
